import { useState } from "react"

interface ChatInputProps {
    onSend: (msg: string) => void
}

const ChatInput = ({ onSend }: ChatInputProps) => {
    const [input, setInput] = useState("")

    const sendMessage = () => {
        if (!input.trim()) return
        onSend(input)
        setInput("")
    }

    return (
        <div className="p-4 border-t bg-white">
            <div className="flex rounded overflow-hidden shadow-sm border">
                <input
                    type="text"
                    className="flex-1 px-3 py-2 outline-none text-sm"
                    placeholder="Type a message..."
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyDown={(e) => e.key === "Enter" && sendMessage()}
                />
                <button
                    onClick={sendMessage}
                    className="bg-blue-500 text-white px-4 py-2 text-sm font-medium hover:bg-blue-600 transition-colors"
                >
                    Send
                </button>
            </div>
        </div>
    )
}

export default ChatInput
